<template>
  <div>
    <el-button v-if="!communityList.length" style="width: 100%" type="success" @click="handleAddChildren(``,0)">添加社团
    </el-button>
    <el-empty description="这里空空如也" v-if="!communityList.length"></el-empty>
    <el-tree
        v-else
        :data="communityList"
        :expand-on-click-node="false"
        accordion
        default-expand-all
        style="cursor: pointer;height: 80vh "
        @node-click="(e) => handleGetExpand(e)"
    >
      <div
          slot-scope="{ data }"
          class="custom-tree-node"
      >
        <div style="font-size:1em;width: 60vw">
          <span>
            {{ data.communityName }} <span
              v-if="data.communityAddress">[{{ data.communityAddress|toJsonParse|address }}]</span>
          </span>
          <el-tooltip class="item" content="添加子社团" effect="dark" placement="right">
            <i class="el-icon-circle-plus" style="color:#02b340;font-size:1.2em;float:right;"
               @click.stop="handleAddChildren(data.communityName,data.communityId)"/>
          </el-tooltip>

          <i class="el-icon-info" style="font-size:1.2em;float:right;"
             @click="handleGetCommunityInfo(data.communityName,data.communityId)"/>

          <!--           添加同级别的社团就相当于添加父亲的孩子社团-->
          <el-tooltip class="item" content="添加同级社团" effect="dark" placement="left">
            <i class="el-icon-circle-plus" style="color:#02b340;font-size:1.2em;float:right;"
               @click.stop="handleAddChildren(data.communityName,data.parentcommunityId)"/></el-tooltip>
        </div>
      </div>
    </el-tree>

    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="addContentShow"
    >
      <span slot="title">
        添加社团
      </span>
      <add-community-pannel :parentcommunity-id="addContentId"
                            @cancel="addContentShow=false"
                            @submit="submitAddCommunity"/>
    </el-dialog>
    <el-dialog :visible.sync="articleContentShow"
               align="center"
               fullscreen>
      <span slot="title"><span style="color: red">{{ addContentTitle }}</span>相关信息</span>
      <el-card shadow="hover">
        <el-table :data="info" border style="width: 100%">
          <el-table-column
              align="center"
              header-align="center"
              label="志愿者ID"
              prop="volunteerId"
              width="80"
          />
          <el-table-column
              align="center"
              header-align="center"
              label="姓名"
              prop="volunteerName"
              width="80"
          />
          <el-table-column
              align="center"
              header-align="center"
              label="身份证号"
              prop="volunteerIdentify"
              width="200"
          />
          <el-table-column
              align="center"
              header-align="center"
              label="手机号"
              prop="volunteerMobile"
          />
          <el-table-column
              align="center"
              header-align="center"
              label="出生日期"
              prop="volunteerAge"/>
          <el-table-column
              align="center"
              header-align="center"
              label="性别"
              prop="volunteerSex"/>
          <el-table-column
              label="中国志愿网编号"
              prop="volunteerNo"
          />
          <el-table-column
              label="职业"
              prop="volunteerOccupation"
          />
          <el-table-column
              label="特长"
              prop="volunteerSpecialty"
          />
          <el-table-column
              label="志愿者地址"
              prop="volunteerAddress"
          />
          <el-table-column
              label="志愿者账号"
              prop="volunteerAccount"
          />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                  :src="scope.row.volunteerAvatar"
                  alt="头像"
                  class="commodity-img"
              />
            </template>
          </el-table-column>
          <el-table-column label="积分">
            <template slot-scope="scope">
              <span>{{ scope.row.volunteerCredits }}</span>
            </template>
          </el-table-column>

        </el-table>

      </el-card>
      <span slot="footer"
            align="center"
            class="dialog-footer"
            style="display:flex;justify-content: center"
      >
        <el-button type="primary" @click="articleContentShow=false">确 定</el-button>
        <el-button type="primary" @click="articleContentShow=false">取 消 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      communityList: [],
      childrenList: [],
      page: 1,
      keyword: "",
      size: 999,
      total: 0,
      content: null,
      articleContentShow: false,
      addContentShow: false,
      addBrotherContentShow: false,
      addContentTitle: "",
      addContentId: null,
      info: null,
    };
  },
  mounted () {
    this.handleGetCommunity();
  },
  methods: {
    //获取单个社团的信息
    async handleGetCommunityInfo (name, e) {
      // console.log(e)
      this.articleContentShow = true;
      const res = await this.$http.communityInfo(e);
      console.log(res);
      if (res.code !== 0) return null;
      // debugger
      this.info = res?.data.volunteers;
      this.articleContentShow = true;

      this.addContentTitle = name;

    },
    // 分页查询全部闲置
    async handleGetCommunity () {
      const res = await this.$http.communityGetChildCommunity(0);
      if (res.code !== 0) return this.$message.error(res.msg);
      const list = res.data;
      for (let community of list) {
        this.communityList.push({
          ...community,
          children: [],
        });
      }
      this.total = res.data.totalCount;
    },
    async handleGetExpand (data) {
      // 获取下一级
      let newChild = [];
      // 如果已经查询过就没必要再查询了
      if (data.isAppend) return;
      data.isAppend = true;
      const res = await this.$http.communityGetChildCommunity(data.communityId);
      for (let community of res.data) {
        newChild.push({
          ...community,
          children: [],
        });
      }
      data.children.push(...newChild);
    },
    //  添加子社团
    handleAddChildren (name, e) {
      this.addContentTitle = name;
      this.addContentId = e;
      this.addContentShow = true;

    },
    submitAddCommunity () {
      this.addContentShow = false;
    },

  },
  components: {
    "add-community-pannel": _ => import("./communityAdd"),
  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 80px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
